<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <!-- dom的基础 上-->
    <script>
        //标签,元素,节点是同一个东西,在dom中通常称为节点(与各自使用方式有关,dom中需要操作节点)
        //操作元素的方法
        //1.oDiv.style.display = 'block';
        //2.oDiv.style['display'] = 'block';
        //3.通过操作节点来实现,使用的频率较少       ←本次


        window.onload = function() {
            //===========
            //1.子节点的获取方式
            let oUl = document.getElementById('ul1');
            console.log('childNodes:',oUl.childNodes.length);   // 7
            //因为<ul>到<li>之间存在文本节点

            for (let i = 0; i < oUl.childNodes.length; i++) {
                //子节点各自的属性
                console.log('child node types:',oUl.childNodes[i].nodeType);    // 结果:3,1,3,1,3,1,3
            }
            //3:文本节点;   1:元素节点;     2:属性节点

            //因此可以用 ===1 来只获取元素节点
            for (let i = 0; i < oUl.childNodes.length; i++) {
                let childNode = oUl.childNodes[i];
                if (childNode.nodeType === 1) {
                    childNode.style.background = 'pink';
                    childNode.style.width = '200px';
                }
            }

            //注意,childNodes[i]在chrome/ff,ie678,ie9下都会出现不同的结果,但是nodeType都是一样的
            //或者可以使用oUl.children,来精确获取元素节点,也不会导致兼容问题(据说)
            console.log('children:',oUl.children.length);   // 3
            // oUl.children[1].setAttribute('style','background:orange');  //背景会变橘,但是上面设置的width会被覆盖
            oUl.children[1].style.background = 'orange';  //背景会变橘,不会改变width,但是idea没有提示

            //此外,子节点只算子 节点,不会计算子节点中的子节点,例如ul中的span


            //===========
            //2.其他子节点的获取方式(firstChild等)
            let oUl1 = document.getElementById('ul1');
            console.log('node type :',oUl1.firstChild.nodeType); //3,文本节点
            //与childNodes一样的结果,并不像children那样可以弹出第一个节点;  据说ie678可以弹出第一个节点

            //chrome可以使用firstElementChild来获取第一个节点
            console.log(oUl1.firstElementChild.nodeType);
            oUl1.firstElementChild.style.background = 'pink';

            //其他的节点相关的语法
            console.log('last child',oUl1.lastChild);           //最后一个'节点'
            console.log('last ele child',oUl1.lastElementChild);    //最后一个标签

            console.log('firstChild.nextSibling',oUl1.firstChild.nextSibling);                    //第二个'节点'
            console.log('firstElementChild.nextElementSibling',oUl1.firstElementChild.nextElementSibling);  //第二个标签

            console.log('lastChild.previousSibling:',oUl1.lastChild.previousSibling);       //倒数第二个'节点'
            console.log('lastElementChild.previousElementSibling:',oUl1.lastElementChild.previousElementSibling); //倒数第二个标签



            //===========
            //3.父节点的获取方式                 //补充,不可以使用多个window.onload,会导致后面的加载内容被覆盖
            console.log('parent node:',oUl.parentNode); //父节点的信息
            //alert(oUl.parentNode);  //[object HTMLDivElement]

            //练习,点击[隐藏],信息文字(父节点)消失
            let aA = document.getElementsByTagName('a');    //选出所有的a标签
            for (let i = 0; i < aA.length; i++) {
                aA[i].onclick = function () {
                    this.parentNode.style.display = 'none';     //console.log(this);  // this : a标签本身
                    // aA[i].parentNode.style.display = 'none';  //也可以不用this,貌似效果一样,但idea会黄线
                }
            }
        }

    </script>
</head>

<body>

<div id="div1">
    <ul id="ul1">
        <li>1 <span>2</span></li>
        <li>2</li>
        <li>3</li>
    </ul>

    <ul id="ul2">
        <li>1111 <a href = "javascript:void(0); ">隐藏</a></li>
        <li>2222 <a href = "javascript:void(0); ">隐藏</a></li>
        <li>3333 <a href = "javascript:void(0); ">隐藏</a></li>
    </ul>

</div>

</body>
</html>